<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     html{
    font-family: "微软雅黑";
}
table{
    border-collapse: collapse;
    text-align: center;
    margin: 150px auto;
    width: 40%;
    height: 370px;
}
table th{
    font-size: 30px;
}
button{
    display: block;
    margin:0 auto;
    width: 200px;
    height: 150px;
    font-size: 35px;
    border-radius: 15%;
    margin-top: -75px;
    background-color: rgba(0, 0, 0, 0.1)
}
button:hover{
    background-color: rgba(0, 0, 0, 0.2);
}
    </style>
</head>

<body>
     <table border="1px">
         <thead>
             <tr>
                 <th colspan="9">达内IT培训太原龙城中心WEB2106随机点名器</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td></td>
                 <td id="c11">朱泉瑛</td>
                 <td id="c12">李诗煜</td>
                 <td rowspan="6" colspan="2">过道</td>
                 <td id="c13">赵志亮</td>
                 <td id="c14">李祉钰</td>
                 <td id="c15">介玉彤</td>
                 <td></td>
             </tr>
             <tr>
                 <td id="c21">陈洋</td>
                 <td id="c22">王美云</td>
                 <td id="c23">曹慧涓</td>
                 <td id="c24">王卫芳</td>
                 <td id="c25">李凯鹏</td>
                 <td id="c26">花雨</td>
                 <td id="c27">刘雅利</td>
             </tr>
             <tr>
                 <td id="c31">景青虎</td>
                 <td id="c32">李越</td>
                 <td id="c33">李禹超</td>
                 <td id="c34">王昊</td>
                 <td id="c35">韩钊</td>
                 <td id="c36">李晓宁</td>
                 <td id="c37">马玉涛</td>
             </tr>
             <tr>
                 <td id="c41">李绍尊</td>
                 <td id="c42">宋晓天</td>
                 <td id="c43">孟如欣</td>
                 <td id="c44">胡庆庆</td>
                 <td id="c45">武丝丝</td>
                 <td id="c46">尹婷</td>
                 <td id="c47">李科莹</td>
             </tr>
             <tr>
                 <td id="c51">王美祺</td>
                 <td id="c52">刘泽禹</td>
                 <td id="c53">杨潞</td>
                 <td id="c54">冯剑</td>
                 <td id="c55">刘珂</td>
                 <td></td>
                 <td id="c56">李艺佳</td>
             </tr>
             <tr>
                 <td id="c61">张桦漳</td>
                 <td id="c62">黄静亚</td>
                 <td id="c63">李清萍</td>
                 <td id="c64">任林钧</td>
                 <td id="c65">高港兴</td>
                 <td></td>
                 <td></td>
             </tr>
         </tbody>
     </table>
     <button id="btn">开&nbsp;&nbsp;始</button>
</body>
  <script>
    var rdm1=0;
    var rdm2=0;
    btn.onclick=()=>{
        if(!(rdm1==0&&rdm2==0)){
            var c1=document.getElementById('c'+rdm1+rdm2);
            c1.style.backgroundColor='';
        }
       if(btn.innerHTML=='停&nbsp;&nbsp;止'){
           btn.innerHTML='开&nbsp;&nbsp;始'
       }else{
           btn.innerHTML='停&nbsp;&nbsp;止';
           rdm1=Math.ceil(Math.random()*6);
           if(rdm1==1||rdm1==6){
           rdm2=Math.ceil(Math.random()*5);
           }else if(rdm1==5){
           rdm2=Math.ceil(Math.random()*6);
           }
           else{
           rdm2=Math.ceil(Math.random()*7);
           }
           var cc=document.getElementById('c'+rdm1+rdm2);
           cc.style='background-color:rgba(0,0,0,0.2)';
       }
       }




  </script>
</html>